<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--
  一个form标签表示一个表单区域
    action属性:类似于超链接的herf属性,当表单提交时指定跳转的地址
  在表单区域中可以设置表单元素
  用户可以获取到表单元素中用户所输入的信息
  表单元素存在多种,大部分都是通过input标签表示
  input标签中的type属性控制表单元素的类型
    text:单行文本框
    password:密码框
-->
<form action="#" method="post">
    <input type="hidden" name="id" value="10">
<!--    文本框:<input type="text" name="username" value="admin" readonly="readonly"><br>-->
<!--    文本框:<input type="text" name="username" size="20" required placeholder="请输入用户名" maxlength="5" minlength="2"><br>-->
    文本框:<input type="text" name="username" size="20" placeholder="请输入用户名" maxlength="5" minlength="2"><br>
<!--    文本框:<input type="text" name="username" value="admin" disabled><br>-->
    <label for="password">密码框</label>:<input type="password" id="password" name="password" size="30"><br>
    单选框:
    <input type="radio" name="gender" value="man" checked="checked">男
    <input type="radio" name="gender" value="woman" checked>女<br>
    多选框:
    <input type="checkbox" name="hobbies" value="eat" checked>吃饭
    <input type="checkbox" name="hobbies" value="sleep" checked>睡觉
    <input type="checkbox" name="hobbies" value="beat">打豆豆<br>
    文件选择器:
    <input type="file" accept="image/gif"><br>
    下拉列:
    <select name="edu">
        <option value="-1">请选择</option>
        <option value="1">大专</option>
        <option value="2" selected>本科</option>
        <option value="3">研究生</option>
    </select><br>
    教育背景:
    <fieldset style="width: 300px;">
        <legend>大学</legend>
        学校:<input type="text"><br>
        专业:<input type="text"><br>
        班级:<input type="text"><br>
    </fieldset><br>
    <!-- 多行文本框 -->
    请阅读一下协议:<br>
    <textarea cols="50" rows="10">
        您在使用百度公司提供的各项服务之前，请您务必审慎阅读、充分理解本协议各条款内容，特别是以粗体标注的部分，包括但不限于免除或者限制责任的条款。如您不同意本服务协议及/或随时对其的修改，您可以主动停止使用百度公司提供的服务；您一旦使用百度公司提供的服务，即视为您已了解并完全同意本服务协议各项内容，包括百度公司对服务协议随时所做的任何修改，并成为我们的用户。
    </textarea><br>
    <!-- 具有提交表单效果的按钮 -->
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通" onclick="javascript:alert('Hello World');">
    <!-- 具有提交表单效果的按钮 -->
    <button>提交</button>
    <button type="button">普通</button>
    <!-- 具有提交表单效果的图片按钮 -->
    <input type="image" src="../images/submit.gif">
</form>
</body>
</html>